/**
 * Created by Administrator on 2016/10/10.
 */
//获取必要的元素
var runData = {
    go:document.getElementById('go'),//向指定方向前进
    left:document.getElementById('left'),//向左转
    right:document.getElementById('right'),//向右转
    run_div:document.getElementsByClassName('run_div')[0],
    red_div:document.getElementsByClassName('red_div')[0],
    td:document.getElementsByTagName('td')
};
//alert(funData.red_div.offsetWidth)
function addEvent(ele,eventName,listener){
    if(ele.addEventListener){
        ele.addEventListener(eventName,listener,false);
    }else if(ele.attachEvent){
        ele.attachEvent('on'+eventName,listener);
    }else{
        ele['on'+eventName] = listener;
    }
}


function runDiv(funData){
    this.direction = 'north';
    this.runData = funData;
}

runDiv.prototype={


    turnLeft:function(){
        if(this.runData.red_div.offsetTop == 0 && this.runData.red_div.offsetWidth == 40){
            this.runData.red_div.style.width = '10px';
            this.runData.red_div.style.height = '30px';
            this.direction = 'west';
            //下
        }else if(this.runData.red_div.offsetTop == '20' && this.runData.red_div.offsetWidth == '40'){
            this.runData.red_div.style.width = '10px';
            this.runData.red_div.style.height = '30px';
            this.runData.red_div.style.top = '0px';
            this.runData.red_div.style.left = '30px';
            this.direction = 'east';
            //左
        }else if(this.runData.red_div.offsetWidth == '10' && this.runData.red_div.offsetLeft == '0'){

            this.runData.red_div.style.width = '40px';
            this.runData.red_div.style.height = '10px';
            this.runData.red_div.style.top = '20px';
            this.runData.red_div.style.left = '0px';
            this.direction = 'south';
            //右
        }else if(this.runData.red_div.offsetWidth == '10' && this.runData.red_div.offsetLeft == '30'){
            //上
            this.runData.red_div.style.width = '40px';
            this.runData.red_div.style.height = '10px';
            this.runData.red_div.style.top = '0px';
            this.runData.red_div.style.left = '0px';
            this.direction = 'north';
        }
    },
    turnRight:function(){
        //上
        if(this.runData.red_div.offsetTop == '0' && this.runData.red_div.offsetWidth == '40'){
            this.runData.red_div.style.width = '10px';
            this.runData.red_div.style.height = '30px';
            this.runData.red_div.style.top = '0px';
            this.runData.red_div.style.left = '30px';
            this.direction = 'east';
            //右
        }else if(this.runData.red_div.offsetWidth == '10' && this.runData.red_div.offsetLeft == '30'){
            this.runData.red_div.style.width = '40px';
            this.runData.red_div.style.height = '10px';
            this.runData.red_div.style.top = '20px';
            this.runData.red_div.style.left = '0px';
            this.direction = 'south';
            //下
        }else if(this.runData.red_div.offsetTop == '20' && this.runData.red_div.offsetWidth == '40'){
            this.runData.red_div.style.width = '10px';
            this.runData.red_div.style.height = '30px';
            this.runData.red_div.style.top = '0';
            this.direction = 'west';

        }else if(this.runData.red_div.offsetWidth == '10' && this.runData.red_div.offsetLeft == '0'){
            this.runData.red_div.style.width = '40px';
            this.runData.red_div.style.height = '10px';
            this.runData.red_div.style.top = '0px';
            this.runData.red_div.style.left = '0px';
            this.direction = 'north';
        }
    },
    go:function(){
//       var myTd = this.runData.td;
        var n,m;
       var tds = new Array(10);
        for(var n = 0;n<10;n++){
            tds[n] = new Array(10);
        }

        for(var i = 0;i<10;i++){
            for(var j = 0;j<10;j++){
                tds[i][j] = this.runData.td[(j+(i*10))];
                if(tds[i][j].children.length != 0){
                    n = i;
                    m = j;
                }
            }
        }
        switch (this.direction){
            case 'north':
                if(n != 0){
                    var runNode = tds[n][m].removeChild(tds[n][m].children[0]);
                    tds[n-1][m].appendChild(runNode);
                }else if(n == 0){
                    alert('撞墙了，不能移动了');
                }
                break;
            case 'south':
                if(n != 9){
                    var runNode = tds[n][m].removeChild(tds[n][m].children[0]);
                    tds[n+1][m].appendChild(runNode);
                }else{
                    alert('撞墙了，不能移动了');
                }
                break;
            case 'west':
                if(m != 0){
                    var runNode = tds[n][m].removeChild(tds[n][m].children[0]);
                    tds[n][m-1].appendChild(runNode);
                }else{
                    alert('撞墙了，不能移动了');
                }
                break;
            case 'east':
                if(m != 9){
                    var runNode = tds[n][m].removeChild(tds[n][m].children[0]);
                    tds[n][m+1].appendChild(runNode);
                }else{
                    alert('撞墙了，不能移动了');
                }
                break;
        }

    }

};
var myDiv = new runDiv(runData);
addEvent(runData.left,'click',function(){myDiv.turnLeft()});
addEvent(runData.right,'click',function(){myDiv.turnRight()});
addEvent(runData.go,'click',function(){myDiv.go()});